<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中的velocity.js</title>
    <script src="../vue.js"></script>    
    <script src="./velocity.min.js"></script>
    <style>
      
    </style>
</head>
<body>
    <div id="root"> 
      
        <!-- 动画钩子  入场动画 -->
        <transition            
            name = "fade"            
            @before-enter="handleBeforeEnter"
            @enter="handleEnter"
            @after-enter="handleAfterEnter"
        >
         <!-- 动画钩子  出场动画 -->
         
            <div v-if ="show">hello world </div>
        </transition>       
        <button @click="handleBtnClick">change</button>
    </div>   
    
    <script>    
       
    
        var root = new Vue({
            el: '#root',
            data: {
                show: true
            },            
            methods: {
                handleBtnClick: function(){
                    this.show = ! this.show
                },
                handleBeforeEnter: function(el){
                    el.style.opacity = 0
                },
                handleEnter: function(el , done){
                    Velocity(el,{
                        opacity: 1
                    },{
                        duration: 1000,
                        complete: done
                    })
                },
                handleAfterEnter: function (el){
                    console.log("动画结束")
                }         
            }        
           
        });
    </script>
</body>
</html>